<template>
  <div class="class-progress-container">
    <el-card class="progress-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>班级学习进度概览</span>
        </div>
      </template>
      
      <div class="progress-content">
        <!-- 学生进度表格 -->
        <div class="student-progress">
          <div class="table-title">学生进度详情</div>
          <el-table 
            :data="progressData" 
            border 
            style="width: 100%"
            height="400"
          >
            <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
            <el-table-column prop="completedCourses" label="已完成课程" width="120"></el-table-column>
            <el-table-column prop="totalCourses" label="总课程数" width="100"></el-table-column>
            <el-table-column prop="completionRate" label="完成率" width="120">
              <template #default="{row}">
                <el-progress 
                  :percentage="row.completionRate" 
                  :color="getProgressColor(row.completionRate)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="totalStudyTime" label="总学习时长(小时)" width="150"></el-table-column>
            <el-table-column prop="lastStudyTime" label="最近学习时间" width="180"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { classApi } from '@/api/class'

const props = defineProps({
  classId: {
    type: [String, Number],
    required: true
  }
})

// 数据状态
const loading = ref(false)
const progressData = ref([])

// 加载进度数据 - 需要您提供获取班级进度的API
const loadProgressData = async () => {
  try {
    loading.value = true
    const response = await classApi.getClassProgress(props.classId)
    progressData.value = response.data || response
  } catch (error) {
    console.error('加载进度数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 进度条颜色
const getProgressColor = (percentage) => {
  percentage = Number(percentage)
  return percentage >= 80 ? '#67C23A' : percentage >= 60 ? '#E6A23C' : '#F56C6C'
}

// 初始化加载
onMounted(() => {
  loadProgressData()
})
</script>

<style scoped>
.class-progress-container {
  padding: 20px;
}
.progress-card {
  margin-bottom: 20px;
}
.card-header {
  font-size: 18px;
  font-weight: bold;
}
.progress-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.student-progress {
  flex: 100%;
  margin-top: 20px;
}
.table-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}
</style>